<!---- Creator: Eoly -->
<!---- On 2017/1/10 -->
<!---- Call http://palerock.cn -->

<!--
    获取团商品类型API：
    method:GET
    url:'http://palerock.cn/group/find-all-type'

    请求头:
    无要求

    data:
    {                           // 发送json参数
        无
    }
    返回：
    {
        dataList:       // 返回的商品类型列表
            {
                goodsTypeFormat:                //该商品类型的默认规格，是一个只含规格名的数组
                                                //如：['产品名称','保修期','产品功耗']

                goodsTypeId：                   //该商品类型的id，在和后台交互时需要使用

                goodsTypeName：                 //该商品的类型名

            }
            ...

        error:      // '0'则为操作成功

        mes:        // 操作后返回的信息
    }
-->

<!--
    发起团信息API：
    method:POST
    url:'http://palerock.cn/user/group/add-group'

    请求头:
    Authorization:'Bearer '+token 密文记录

    data:
    {                                   // 发送json参数
                groupTitle:             // 团标题 30字符
                groupSynopsis:          // 团简介 80字符
                groupDetail:            // 团详细介绍 2000字符
                groupFormat:            // 团规格，分为两部分，一部分来自商品默认规格，一部分来自用户自定义规格
                                           如：{"产品名称":"飞机","类型":"载人航空"}
                groupGoodType:          // 团商品类型
                groupImgs:              // 团封面图片，一个数组转化而成的字符串，储存的是封面图片的地址
                                           如：["20170204063229462-211980771.png","201702040632363501875513740.png"]
                groupPrice:             // 团单价
                groupPriceOriginal:     // 团原单价
                groupTargetNumber:      // 团目标人数
                groupPostage:           // 邮费，可选，默认6元
                //多余其他参数不做处理
    }
    返回：
    {

        error:      // '0'则为操作成功

        id:         // 返回操作成功后团的id

        mes:        // 操作返回的信息
    }
-->

<!--
    用户上传图片API：
    method:POST
    url:'http://palerock.cn/h5_back/user/image-upload'

    请求头:
    Authorization:'Bearer '+token 密文记录

    data:
    {
        image:      // 图片转化为base64编码的字符串
                    // 裁剪图片在下面有详细的演示
    }
    返回：
    {
        data:       // 返回的上传成功的文件名（

        error:      // '0'则为操作成功

        mes:        // 操作后返回的信息
    }
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>AngularTest</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            /*border: 0;*/
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
    <script src="../angular.js"></script>
    <script>

                var net = "http://palerock.cn/h5_back";
//                        var net = "http://localhost:8080";
//        var net = "http://localhost:8081";
        //读取本地缓存
        var token = localStorage.getItem("token");

        if (!token) {
            alert("您还没有登录");
            location.href = "登陆简单演示.html";
        }

        var app = angular.module('app', [])
                .config(function ($httpProvider) {
                    //设置请求头附带 token
                    $httpProvider.defaults.headers.common.Authorization = 'Bearer ' + token;
                });

        app.controller('info', function ($scope, $http) {

            //声明团信息，用以最后提交
            $scope.groupInfo = {};

            //声明基础规格数组
            $scope.baseFormats = [];

            //声明规格数组
            $scope.formats = [];

            //声明类型数组
            $scope.goodsTypes = [];

            //声明选中类型
            $scope.goodsType = {};

            //声明规格json
            $scope.groupInfo.groupFormat = {};

            //声明封面图片数组
            $scope.groupImgs = [];

            //声明一组画布,用于展示略缩图
            $scope.imgs = [];

            //提交团信息
            $scope.handGroupInfo = function () {

                //重置封面图片对象数组
                $scope.groupImgs = [];

                for(var i=0;i<$scope.imgs.length;i++)
                    $scope.groupImgs.push($scope.imgs[i].imgName);

                //将获得的封面图片数组对象转化为json字符串用以上传到服务器
                $scope.groupInfo.groupImgs = JSON.stringify($scope.groupImgs);

                console.log($scope.groupInfo);

                if(token){

                    $http.post(net+'/user/group/add-group',$scope.groupInfo).then(function(res){
                        console.log(res);
                        if(!res.data.error){
                            alert(res.data.mes+'你的团id是：'+res.data.id);
                            window.location.reload();

                        }else{
                            alert("错误代码:"+res.data.error+","+res.data.mes)
                        }
                    },function(){
                        alert('添加失败');
                    })
                }
            };

            //添加商品规格
            $scope.addFormat = function () {
                $scope.formats.push([]);
            };

            //获取所有的团商品类型
            $scope.getAllGroupTypes = function () {
                $http.get(net + '/group/find-all-type').then(function (res) {
                    if (!res.error){
                        console.log(res.data);
                        //将获取的所有商品类型绑定到类型列表
                        $scope.goodsTypes = res.data.dataList;
                    }

                    else
                        alert("错误代码:"+res.data.error+","+res.data.mes)
                }, function () {
                    alert('网络或设置错误');
                })
            };

            //监听用户自己添加的商品规格变化
            $scope.$watch('formats', function () {
                //声明一个规格对象用以储存商品规格
                var format = {};
                for (var i = 0; i < $scope.baseFormats.length; i++) {
                    //若获取基础规格不为空
                    if ($scope.baseFormats[i][0] && $scope.baseFormats[i][1]) {
                        //将规格键值对赋值为对象属性名和值，下标0为规格名，下标1为规格值
                        format[$scope.baseFormats[i][0]] = $scope.baseFormats[i][1];
                    }
                }

                for (i = 0; i < $scope.formats.length; i++) {
                    //若获取基础规格不为空
                    if ($scope.formats[i][0] && $scope.formats[i][1]) {
                        //将规格键值对赋值为对象属性名和值，下标0为规格名，下标1为规格值
                        format[$scope.formats[i][0]] = $scope.formats[i][1];
                    }
                }
                //将获得的规格对象转化为json字符串用以上传到服务器
                $scope.groupInfo.groupFormat = JSON.stringify(format);

            }, true);


            //监听商品类型的默认商品规格的变化
            $scope.$watch('baseFormats', function () {
                //声明一个规格对象用以储存商品规格
                var format = {};
                for (var i = 0; i < $scope.baseFormats.length; i++) {
                    //若获取基础规格不为空
                    if ($scope.baseFormats[i][0] && $scope.baseFormats[i][1]) {
                        //将规格键值对赋值为对象属性名和值，下标0为规格名，下标1为规格值
                        format[$scope.baseFormats[i][0]] = $scope.baseFormats[i][1];
                    }
                }

                for (i = 0; i < $scope.formats.length; i++) {
                    //若获取基础规格不为空
                    if ($scope.formats[i][0] && $scope.formats[i][1]) {
                        //将规格键值对赋值为对象属性名和值，下标0为规格名，下标1为规格值
                        format[$scope.formats[i][0]] = $scope.formats[i][1];
                    }
                }
                //将获得的规格对象转化为json字符串用以上传到服务器
                $scope.groupInfo.groupFormat = JSON.stringify(format);

            }, true);

            //监听用户选择的商品类型是否发生改变
            $scope.$watch('goodsType', function () {

                //若选中商品类型不为空
                if ($scope.goodsType && $scope.goodsType.goodsTypeFormat) {

                    //声明一个简单规格对象储存转化后的数组对象
                    var simpleFormats = eval($scope.goodsType.goodsTypeFormat);

                    //清空基础规格，因为在后面的添加基础规格是使用的push，所有再添加前重置
                    $scope.baseFormats = [];

                    //对获取的数组对象遍历，将获取的规格名赋储存到基础规格数组中
                    for (var i = 0; i < simpleFormats.length; i++) {

                        //声明基础规格中的一个单个简单规格，下标0为规格名，下标1为规格值
                        var format = [];
                        //将每个规格名存储
                        format[0] = simpleFormats[i];
                        $scope.baseFormats.push(format);
                    }

                    //将用户选择类型对应的商品类型id储存到团信息中等待提交
                    $scope.groupInfo.groupGoodType = $scope.goodsType.goodsTypeId;
                }
            });


            //单次提交图片的函数
            //参数为传入的一个文件类型input
            $scope.img_upload = function (files) {

                if (!files || !files[0]) {
                    return;
                }

                //规定上传到服务器图片的大小
                var needHeight = 300;
                var needWidth = 500;

                //规定略缩图大小
                var smallWidth = needWidth * 0.33;

                //FileReader用来读取本地文件
                var reader = new FileReader();

                //实例化图片用于被加载在画布上
                var img = new Image();

                //声明一个画布对象，当图片上传成功后添加到数组中便于显示
                var img_obj = {};

                //获取当前时间戳作为画布唯一id
                img_obj.id = new Date().getTime();

                //通过将这个画布对象添加到画布组实现自动显示已上传的图片
                var index = $scope.imgs.push(img_obj) - 1;

                //自动刷新双向绑定，预防双向绑定失效
                $scope.$digest();

                //获取预览画布
                var canvas = document.getElementById(img_obj.id);
                canvas.width = needWidth;
                canvas.height = needHeight;


                //控制略缩图大小
                canvas.style.width = smallWidth + 'px';

                var ctx = canvas.getContext("2d");

                //当图片加载完毕执行动作
                reader.onload = function () {

                    // 通过 reader.result 来访问生成的 DataURL
                    img.src = reader.result;

                    //获取图片的高宽
                    var width = img.width;
                    var height = img.height;

                    //获取需要使用的矩形图片区域
                    var real_width = width* needHeight/needWidth > height ? height * needWidth / needHeight : width;
                    var real_height = width > height*needWidth/needHeight ? height : width * needHeight / needWidth;
					
					//console.log('need:'+real_width+' '+real_height);
					//console.log('real:'+width+' '+height);

                    //定位使图片居中
                    var img_x = (width - real_width) / 2;
                    var img_y = (height - real_height) / 2;

                    //清除原来画布内容
                    ctx.clearRect(0, 0, needWidth, needHeight);

                    //在画布上渲染头像预览
                    ctx.drawImage(img, img_x, img_y, real_width, real_height, 0, 0, needWidth, needHeight);

                    //将画布渲染的图像转换为base64字符串储存在data中
                    var data = canvas.toDataURL();

                    //发送POST请求
                    $http({

                        method: 'post',
                        url: net + "/user/image-upload",
                        data: data

                    }).then(function (res) {

                        if (!res.data.error) {

                            alert(res.data.mes);

                            //将获得的图片名暂时保存
                            $scope.imgs[index].imgName = res.data.data;

                        } else {

                            $scope.img_del(index);
                            alert('错误代码：' + res.data.error + "," + res.data.mes);
                        }


                    }, function () {
                        $scope.img_del(index);
                        alert('网络或设置错误');

                    })
                };

                //加载选中的图片
                reader.readAsDataURL(files[0]);
            };

            $scope.img_del = function (index) {
                //删除制定下标的封面图片
                $scope.imgs.splice(index, 1);
            };

            $scope.logout = function () {
                localStorage.removeItem("token");
                alert("您已注销成功");
                location.reload();
            }
        });
    </script>
</head>
<body ng-app="app">
<div ng-controller="info" ng-init="getAllGroupTypes()">
    <button ng-click="handGroupInfo()">提交团信息</button>
    <button ng-click="getAllGroupTypes()">获取所有团类型</button>
    <button ng-click="logout()">注销</button>
    <table>
        <tr>
            <td>团标题:</td>
            <td><input type="text" ng-model="groupInfo.groupTitle" placeholder="团标题"/></td>
        </tr>
        <tr>
            <td>团简介:</td>
            <td><input type="text" ng-model="groupInfo.groupSynopsis" placeholder="团简介"/></td>
        </tr>
        <tr>
            <td>商品类型:</td>
            <td>
                <select ng-model="goodsType" ng-options="x.goodsTypeName for x in goodsTypes">>
                </select>
            </td>
        </tr>
        <tr>
            <td>商品规格:</td>
            <td>
                <button ng-click="addFormat()">添加规格</button>
            </td>
        </tr>
        <tr ng-repeat="format in baseFormats">
            <td></td>
            <td><input type="text" ng-model="format[0]" readOnly="true" placeholder="规格名"/>：</td>
            <td><input type="text" ng-model="format[1]" placeholder="规格参数"/></td>
        </tr>
        <tr ng-repeat="format in formats">
            <td></td>
            <td><input type="text" ng-model="format[0]" placeholder="规格名"/>：</td>
            <td><input type="text" ng-model="format[1]" placeholder="规格参数"/></td>
        </tr>
        <tr>
            <td>团详细介绍:</td>
            <td>
                <textarea name="" id="" cols="30" rows="3" ng-model="groupInfo.groupDetail"></textarea>
            </td>
        </tr>
        <tr>
            <td>原价:</td>
            <td><input type="number" ng-model="groupInfo.groupPriceOriginal" placeholder="原价"/></td>
        </tr>
        <tr>
            <td>团购价:</td>
            <td><input type="number" ng-model="groupInfo.groupPrice" placeholder="团购价"/></td>
        </tr>
        <tr>
            <td>目标人数:</td>
            <td><input type="number" ng-model="groupInfo.groupTargetNumber" placeholder="目标人数"/></td>
        </tr>
        <tr>
            <td>邮费:</td>
            <td><input type="number" ng-model="groupInfo.groupPostage" placeholder="邮费"/></td>
        </tr>
        <tr>
            <!--在选择文件动作后自动触发上传的函数-->
            <td>封面图片:</td>
            <td><input type="file" value="添加图片" accept="image/jpg,image/jpeg,image/png" file-model="images"
                       onchange="angular.element(this).scope().img_upload(this.files)"/></td>
        </tr>
        <tr ng-repeat="img in imgs">
            <td></td>
            <td>
                <canvas id="{{img.id}}"></canvas>
            </td>
            <td>
                <button ng-click="img_del($index)">删除</button>
            </td>
        </tr>

    </table>
</div>

</body>
</html>